import React from "react";

import { Map, List, fromJS } from "immutable";

const App = () => {
  // immutable叫做不可变数据：一旦创建了这个数据就再也不能更改了
  //         对immutable对象的任意的添加，删除，编辑操作都只能返回一个新的对象
  // immutable可以做结构共享：当对象里面的一部分发生改变的时候，
  //         只改变这一部分以及它的父节点，其余部分保持结构共享（地址保持不变）

  // 用immutable来创建对象
  // const obj = Map({
  //   a: 3,
  //   b: 4,
  // });
  // console.log(obj);

  // get方法用于获取immtable对象的属性值
  // console.log(obj.get("a"));
  // console.log(obj.get("b"));

  // set方法用于根据一个对象生成另一个对象
  // const obj2 = obj.set("a", 10);
  // console.log(obj2);

  // update方法的第二个参数可以接受一个函数，根据前一次的值进行修改的时候用
  // const obj3 = obj.update("a", (v) => v + 1);
  // console.log(obj3);

  // List可以用来创建immubale数组
  // const arr = List([1, 2, 3, 4]);
  // console.log(arr);

  // fromJS可以将对象的每一层都转成Map或者List
  const obj4 = fromJS({
    a: 3,
    b: 4,
    c: {
      x: 10,
      y: 20,
    },
  });
  // console.log(obj4);

  // getIn方法可以获取深层的数据
  // console.log(obj4.getIn(["c", "x"]));
  // console.log(obj4.getIn(["a"]));
  // console.log(obj4.get("a"));

  // setIn方法用来修改深层的数据
  // const obj5 = obj4.setIn(["c", "x"], 100);
  // console.log(obj5.toJS());

  const obj6 = obj4.updateIn(["c", "y"], (v) => v * 3);
  console.log(obj6.toJS());

  return (
    <>
      <h2>immutable数据结构</h2>
    </>
  );
};

export default App;
